<template>
    <div class="nz-banner">
        <img v-if="list.bannerList" :src="list.bannerList.image_url" alt="">
    </div>
    <div class="nz-container">
        <div class="nz-content">
            <div class="nz-content-item">
                <div class="nz-content-title">
                    <strong>定制内容制作</strong>
                </div>
                <el-divider content-position="center">
                    <div class="line"></div>
                </el-divider>
                <div class="nz-content-box1">
                    <div class="nz-content-p">
                        <p>为了向客户提供更方便的服务，本公司还可以为客户提供内容制作的定制服务：展品文稿编写、动画制作、定制录音音频。可以从全方面满足客户的需求，让展品的介绍内容丰富，方式多样，生动有趣。</p>
                    </div>
                    <div class="nz-content-card">
                        <el-card class="box-card">
                            <template v-if="content.length > 0">
                                <img :src="content[0].image_url" style="width: 100%" />
                            </template>
                            <template #footer>
                                <div class="nz-content-card-title">
                                    <p>文稿编写</p>
                                </div>
                                <div class="nz-content-card-p">
                                    <p>可以根据客户提供的大纲内容，进行编写创作，让内容通俗易懂，自然生动。</p>
                                </div>
                            </template>
                        </el-card>
                        <el-card class="box-card">
                            <template v-if="content.length > 0">
                                <img :src="content[1].image_url" style="width: 100%" />
                            </template>
                            <template #footer>
                                <div class="nz-content-card-title">
                                    <p>动画制作</p>
                                </div>
                                <div class="nz-content-card-p">
                                    <p>为了让小朋友更好的了解展品，我们提供视频动画的制作，通过生动活泼的视频动画，让展品或文物动起来活起来。</p>
                                </div>
                            </template>
                        </el-card>
                        <el-card class="box-card">
                            <template v-if="content.length > 0">
                                <img :src="content[2].image_url" style="width: 100%" />
                            </template>
                            <template #footer>
                                <div class="nz-content-card-title">
                                    <p>定制录音</p>
                                </div>
                                <div class="nz-content-card-p">
                                    <p>可以根据客户需求完成，例如适合成人的传统语音讲解、适合小朋友的生动语音讲解、多国语言版本的语音讲解等。</p>
                                </div>
                            </template>
                        </el-card>
                    </div>
                </div>
                <div class="nz-box2">
                    <div class="nz-box2-title">
                        <div class="nz-box2-title-text">部分博物馆内容案例</div>
                        <div class="nz-box2-title-text2">（图片）</div>
                    </div>
                    <div v-show="screenWidth > 1025">
                        <div class="nz-box2-content">
                            <div class="nz-box2-banner">
                                <template v-if="banner.length > 0">
                                    <el-carousel class="box-carousel">
                                        <el-carousel-item v-for="(item, key) in banner" :key="key">
                                            <img :src="item.image_url" alt="">
                                        </el-carousel-item>
                                    </el-carousel>
                                </template>
                            </div>
                            <div class="nz-box2-item">
                                <div class="nz-box2-item-box">
                                    <div class="nz-box2-item-img">
                                        <template v-if="content2.length > 0">
                                            <img :src="content2[0].image_url" style="width: 100%" />
                                        </template>
                                    </div>
                                    <div class="nz-box2-item-article">
                                        <div class="article-title">
                                            <div class="article-item1">
                                                <div class="title1">
                                                    <strong>扬州大运河博物馆</strong>
                                                </div>
                                                <div class="title2">
                                                    <p>湿地展厅</p>
                                                </div>
                                            </div>
                                            <div class="article-item2">
                                                <div class="article-content">
                                                    <p>鱼儿的乐园</p>
                                                    <p>鸟儿的天堂</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="nz-box2-item-box">
                                    <div class="nz-box2-item-article">
                                        <div class="article-title">
                                            <div class="article-item1">
                                                <div class="title1">
                                                    <strong>扬州大运河博物馆</strong>
                                                </div>
                                                <div class="title2">
                                                    <p>湿地展厅</p>
                                                </div>
                                            </div>
                                            <div class="article-item2">
                                                <div class="article-content">
                                                    <p>鱼儿的乐园</p>
                                                    <p>鸟儿的天堂</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="nz-box2-item-img">
                                        <template v-if="content3.length > 0">
                                            <img :src="content3[0].image_url" style="width: 100%" />
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-show="screenWidth > 768 && screenWidth < 1025">
                        <div class="nz-box2-content">
                            <div class="nz-box2-banner">
                                <template v-if="banner.length > 0">
                                    <el-carousel class="box-carousel">
                                        <el-carousel-item v-for="(item, key) in banner" :key="key">
                                            <img :src="item.image_url" alt="">
                                        </el-carousel-item>
                                    </el-carousel>
                                </template>
                            </div>
                            <div class="nz-box2-item">
                                <div class="nz-box2-item-box">
                                    <div class="nz-box2-item-img">
                                        <template v-if="content2.length > 0">
                                            <img :src="content2[0].image_url" style="width: 100%" />
                                        </template>
                                    </div>
                                    <div class="nz-box2-item-article">
                                        <div class="article-title">
                                            <div class="article-item1">
                                                <div class="title1">
                                                    <strong>扬州大运河博物馆</strong>
                                                </div>
                                                <div class="title2">
                                                    <p>湿地展厅</p>
                                                </div>
                                            </div>
                                            <div class="article-item2">
                                                <div class="article-content">
                                                    <p>鱼儿的乐园</p>
                                                    <p>鸟儿的天堂</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="nz-box2-item-box">
                                    <div class="nz-box2-item-article">
                                        <div class="article-title">
                                            <div class="article-item1">
                                                <div class="title1">
                                                    <strong>扬州大运河博物馆</strong>
                                                </div>
                                                <div class="title2">
                                                    <p>湿地展厅</p>
                                                </div>
                                            </div>
                                            <div class="article-item2">
                                                <div class="article-content">
                                                    <p>鱼儿的乐园</p>
                                                    <p>鸟儿的天堂</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="nz-box2-item-img">
                                        <template v-if="content3.length > 0">
                                            <img :src="content3[0].image_url" style="width: 100%" />
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-show="screenWidth < 767" class="bwg">
                        <el-card class="bwg-card">
                            <template v-if="content3.length > 0">
                                <img :src="content3[0].image_url" style="width: 100%" />
                            </template>
                            <template #footer>
                                <div class="bwg-card-foot-title">
                                    <p>文稿编写文稿编写文稿编写文稿编写文稿编写文稿编写</p>
                                </div>
                            </template>
                        </el-card>
                        <el-card class="bwg-card">
                            <template v-if="content3.length > 0">
                                <img :src="content3[0].image_url" style="width: 100%" />
                            </template>
                            <template #footer>
                                <div class="bwg-card-foot-title">
                                    <p>文稿编写</p>
                                </div>
                            </template>
                        </el-card>
                        <el-card class="bwg-card">
                            <template v-if="content3.length > 0">
                                <img :src="content3[0].image_url" style="width: 100%" />
                            </template>
                            <template #footer>
                                <div class="bwg-card-foot-title">
                                    <p>文稿编写</p>
                                </div>
                            </template>
                        </el-card>
                        <el-card class="bwg-card">
                            <template v-if="content3.length > 0">
                                <img :src="content3[0].image_url" style="width: 100%" />
                            </template>
                            <template #footer>
                                <div class="bwg-card-foot-title">
                                    <p>文稿编写</p>
                                </div>
                            </template>
                        </el-card>
                    </div>
                </div>
                <div class="nz-box2">
                    <div class="nz-box2-title">
                        <div class="nz-box2-title-text2">（视频）</div>
                    </div>
                    <template v-if="options.src">
                        <div class="video">
                            <vue3VideoPlay v-bind="options" />
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { getContentList } from '@/api/nrzz.js';

// 响应式数据，用于存储屏幕宽度
const screenWidth = ref(window.innerWidth);
// 监听屏幕尺寸变化，更新屏幕宽度数据
const updateScreenWidth = () => {
    screenWidth.value = window.innerWidth;
};
window.addEventListener('resize', updateScreenWidth);

const banner = ref([])
const list = ref([])

const content = ref({})
const content2 = ref({})
const content3 = ref({})



const options = reactive({
    width: "100%", //播放器高度
    height: '450px', //播放器高度
    color: "#409eff", //主题色
    title: '测试', //视频名称
    src: "", //视频源
    muted: true, //静音
    webFullScreen: false,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: true, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false,  //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制器
})

// 在组件挂载时获取初始屏幕宽度
onMounted(() => {
    screenWidth.value = window.innerWidth;
    getContentList().then(res => {
        list.value = res.data;
        if (res.data.video != null) {
            options.src = res.data.video.image_url || "";
        }
        banner.value = res.data.imgList.filter(item => item.position === 'content_01')
        content.value = res.data.imgList.filter(item => item.position === 'content')
        content2.value = res.data.imgList.filter(item => item.position === 'content_02')
        content3.value = res.data.imgList.filter(item => item.position === 'content_03')
    })
});

</script>

<style scoped lang="scss">
@media screen and (min-width: 1920px) {
    .nz-banner {
        width: 100%;
        height: auto;

        img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
    }

    .video {
        margin: 80px auto;
    }

    .nz-box2-item-box {
        max-width: 600px;
        height: 300px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: flex-start;
    }

    :deep(.el-carousel__container) {
        height: 600px;
    }

    .nz-box2-item-img {
        max-width: 300px;
    }

    .nz-box2-item {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
    }

    .nz-box2-banner {
        width: 600px;
        height: 300px;
    }

    .nz-box2-banner img {
        width: 600px;
        height: 600px;
    }

    .nz-box2-content {
        display: flex;
        margin-top: 50px;
    }

    .article-content {
        font-size: 18px;
        margin-top: 50px;
    }

    .nz-box2-item-article {
        padding-left: 50px;
        width: 300px;
        height: 300px;
    }

    .article-item1 {
        margin-top: 30px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .article-item1 strong {
        font-size: 24px;
        color: #003399;
        line-height: 1.5;
        height: 100%;
        word-wrap: break-word;
    }

    .article-item1 p {
        font-size: 18px;
        line-height: 1.5;
        height: 100%;
        word-wrap: break-word;
    }

    .nz-box2-title {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
    }

    .nz-box2-title-text {
        height: 100%;
        word-wrap: break-word;
        font-size: 34px;
    }

    .nz-box2-title-text2 {
        height: 100%;
        word-wrap: break-word;
        font-size: 26px;
        margin-top: 20px;
    }

    .box-card {
        max-width: 372px;
        height: 460px;
        --el-card-border-color: none;
    }

    .nz-container {
        max-width: 100% !important;
        height: 100%;
    }

    .nz-content {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
        padding: 0 150px;
    }

    .nz-content-item {
        max-width: 1200px;
    }

    .nz-content-card {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-around;
        align-items: center;
        margin-top: 65px;
    }

    .nz-content-p {
        font-size: 18px;
        line-height: 1.75;
        height: 100%;
        word-wrap: break-word;
        margin-top: 70px;
    }

    .nz-content-card-title {
        height: 100%;
        word-wrap: break-word;
        color: #262626;
        font-size: 24px;
        font-weight: bolder;
        margin-bottom: 20px;
    }

    .nz-content-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }

    .nz-content-card-p {
        text-align: center;
        color: #989898;
        font-size: 16px;
        height: 100%;
        word-wrap: break-word;
        margin-left: 22px;
    }

    :deep(.el-card__footer) {
        margin-top: -40px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    :deep(.el-card__body) {
        padding: 40px;
    }

    :deep(.el-divider__text) {
        background-color: var(--el-bg-color);
        color: var(--el-text-color-primary);
        font-size: 14px;
        font-weight: 500;
        position: absolute;
    }

    .el-divider--horizontal {
        border-top: 1px var(--el-border-color) var(--el-border-style);
        display: block;
        height: 1px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1919px) {

    .video {
        margin: 80px auto;
    }

    .nz-box2-item-box {
        max-width: 600px;
        height: 300px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: flex-start;
    }

    :deep(.el-carousel__container) {
        height: 600px;
    }

    .nz-box2-item-img {
        max-width: 300px;
    }

    .nz-box2-item {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
    }

    .nz-box2-banner {
        width: 600px;
        height: 300px;
    }

    .nz-box2-banner img {
        width: 600px;
        height: 600px;
    }

    .nz-box2-content {
        display: flex;
        margin-top: 50px;
    }

    .article-content {
        font-size: 18px;
        margin-top: 50px;
    }

    .nz-box2-item-article {
        padding-left: 50px;
        width: 300px;
        height: 300px;
    }

    .article-item1 {
        margin-top: 30px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .article-item1 strong {
        font-size: 24px;
        color: #003399;
        line-height: 1.5;
        height: 100%;
        word-wrap: break-word;
    }

    .article-item1 p {
        font-size: 18px;
        line-height: 1.5;
        height: 100%;
        word-wrap: break-word;
    }

    .nz-box2-title {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
    }

    .nz-box2-title-text {
        height: 100%;
        word-wrap: break-word;
        font-size: 34px;
    }

    .nz-box2-title-text2 {
        height: 100%;
        word-wrap: break-word;
        font-size: 26px;
        margin-top: 20px;
    }

    .box-card {
        max-width: 372px;
        height: 460px;
        --el-card-border-color: none;
    }

    .nz-container {
        max-width: 100% !important;
        height: 100%;
    }

    .nz-content {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
        padding: 0 150px;
    }

    .nz-content-item {
        max-width: 1200px;
    }

    .nz-content-card {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-around;
        align-items: center;
        margin-top: 65px;
    }

    .nz-content-p {
        font-size: 18px;
        line-height: 1.75;
        height: 100%;
        word-wrap: break-word;
        margin-top: 70px;
    }

    .nz-content-card-title {
        height: 100%;
        word-wrap: break-word;
        color: #262626;
        font-size: 24px;
        font-weight: bolder;
        margin-bottom: 20px;
    }

    .nz-content-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }

    .nz-content-card-p {
        text-align: center;
        color: #989898;
        font-size: 16px;
        height: 100%;
        word-wrap: break-word;
        margin-left: 22px;
    }

    :deep(.el-card__footer) {
        margin-top: -40px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    :deep(.el-card__body) {
        padding: 40px;
    }

    :deep(.el-divider__text) {
        background-color: var(--el-bg-color);
        color: var(--el-text-color-primary);
        font-size: 14px;
        font-weight: 500;
        position: absolute;
    }

    .el-divider--horizontal {
        border-top: 1px var(--el-border-color) var(--el-border-style);
        display: block;
        height: 1px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .video {
        margin: 80px auto;
    }

    .nz-banner img {
        max-width: 100%;
        height: auto;
    }

    .nz-box2-item-box {
        width: 600px;
        height: 300px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: flex-start;
    }

    :deep(.el-carousel__container) {
        height: 600px;
    }

    .nz-box2-item-img {
        width: 200px;
    }

    .nz-box2-item-img img {
        width: 200px;
        height: 300px;
    }

    .nz-box2-item {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        width: 400px;
    }

    .nz-box2-banner {
        width: 600px;
        height: 300px;
    }

    .nz-box2-banner img {
        width: 600px;
        height: 600px;
    }

    .nz-box2-content {
        display: flex;
        margin-top: 50px;
    }

    .article-content {
        font-size: 18px;
        margin-top: 50px;
    }

    .nz-box2-item-article {
        width: 200px;
        height: 300px;
    }

    .article-item1 {
        margin-top: 30px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .article-item1 strong {
        font-size: 24px;
        color: #003399;
        line-height: 1.5;
        height: 100%;
        word-wrap: break-word;
    }

    .article-item1 p {
        font-size: 18px;
        line-height: 1.5;
        height: 100%;
        word-wrap: break-word;
    }

    .nz-box2-title {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
    }

    .nz-box2-title-text {
        height: 100%;
        word-wrap: break-word;
        font-size: 34px;
    }

    .nz-box2-title-text2 {
        height: 100%;
        word-wrap: break-word;
        font-size: 26px;
        margin-top: 20px;
    }

    .box-card {
        width: 372px;
        height: 460px;
        --el-card-border-color: none;
    }

    .nz-container {
        width: 100% !important;
        height: 100%;
    }

    .nz-content {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
    }

    .nz-content-item {
        width: 780px;
    }

    .nz-content-card {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-around;
        align-items: center;
        margin-top: 65px;
    }

    .nz-content-p {
        font-size: 18px;
        line-height: 1.75;
        height: 100%;
        word-wrap: break-word;
        margin-top: 70px;
    }

    .nz-content-card-title {
        height: 100%;
        word-wrap: break-word;
        color: #262626;
        font-size: 24px;
        font-weight: bolder;
        margin-bottom: 20px;
    }

    .nz-content-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }

    .nz-content-card-p {
        text-align: center;
        color: #989898;
        font-size: 16px;
        height: 100%;
        word-wrap: break-word;
        margin-left: 22px;
    }

    :deep(.el-card__footer) {
        margin-top: -40px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    :deep(.el-card__body) {
        padding: 40px;
    }

    :deep(.el-divider__text.is-center) {
        left: 45%;
        transform: translateX(0) translateY(0);
    }

    :deep(.el-divider__text) {
        background-color: var(--el-bg-color);
        color: var(--el-text-color-primary);
        font-size: 14px;
        font-weight: 500;
        position: absolute;
    }

    .el-divider--horizontal {
        border-top: 1px var(--el-border-color) var(--el-border-style);
        display: block;
        height: 1px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }
}


@media screen and (max-width: 768px) {
    .bwg-card-foot-title p {
        width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-left: 19px;
    }

    .bwg-card-foot-title {
        margin-top: -46px;
    }

    .bwg {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-content: center;
        align-items: center;
    }

    .bwg-card {
        width: 176px;
        margin-left: 10px;
        margin-top: 10px;
        --el-card-border-color: none;
    }

    .video {
        margin: 80px auto;
    }

    .nz-banner img {
        max-width: 100%;
        height: auto;
    }

    .nz-box2-item-box {
        width: 600px;
        height: 300px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: flex-start;
    }

    :deep(.el-carousel__container) {
        height: 300px;
    }

    .nz-box2-item-img {
        width: 369px;
        height: 341px;
    }

    .nz-box2-item {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
    }

    .nz-box2-banner {
        width: 600px;
        height: 300px;
    }

    .nz-box2-banner img {
        width: 600px;
        height: 600px;
    }

    .nz-box2-content {
        display: flex;
        margin-top: 50px;
    }

    .article-content {
        font-size: 18px;
        margin-top: 50px;
    }

    .nz-box2-item-article {
        padding-left: 50px;
        width: 300px;
        height: 300px;
    }

    .article-item1 {
        margin-top: 30px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .article-item1 strong {
        font-size: 24px;
        color: #003399;
        line-height: 1.5;
        height: 100%;
        word-wrap: break-word;
    }

    .article-item1 p {
        font-size: 18px;
        line-height: 1.5;
        height: 100%;
        word-wrap: break-word;
    }

    .nz-box2-title {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
    }

    .nz-box2-title-text {
        height: 100%;
        word-wrap: break-word;
        font-size: 34px;
    }

    .nz-box2-title-text2 {
        height: 100%;
        word-wrap: break-word;
        font-size: 26px;
        margin-top: 20px;
    }

    .box-card {
        width: 372px;
        height: 460px;
        --el-card-border-color: none;
    }

    .nz-container {
        width: 100% !important;
        height: 100%;
    }

    .nz-content {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .nz-content-item {
        width: 380px;
    }

    .nz-content-card {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-around;
        align-items: center;
        margin-top: 65px;
    }

    .nz-content-p {
        font-size: 18px;
        line-height: 1.75;
        height: 100%;
        word-wrap: break-word;
        margin-top: 70px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .nz-content-card-title {
        height: 100%;
        word-wrap: break-word;
        color: #262626;
        font-size: 24px;
        font-weight: bolder;
        margin-bottom: 20px;
    }

    .nz-content-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }

    .nz-content-card-p {
        text-align: center;
        color: #989898;
        font-size: 16px;
        height: 100%;
        word-wrap: break-word;
        margin-left: 22px;
    }

    :deep(.el-card__footer) {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    :deep(.el-divider__text.is-center) {
        left: 35%;
        transform: translateX(0) translateY(0);
    }

    :deep(.el-divider__text) {
        background-color: var(--el-bg-color);
        color: var(--el-text-color-primary);
        font-size: 14px;
        font-weight: 500;
        position: absolute;
    }

    .el-divider--horizontal {
        border-top: 1px var(--el-border-color) var(--el-border-style);
        display: block;
        height: 1px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }
}
</style>
